﻿<%@ Page Title="" Language="C#" MasterPageFile="AdminMsaster.master" AutoEventWireup="true" CodeFile="BeBorrowedBooksRanking.aspx.cs" Inherits="Admin_BeBorrowedBooksRanking" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script src="assets/js/Chart-1.0.1-beta.4.js"></script>
    <link href="assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:BooksManagerSystemConnectionString %>">
        <SelectParameters>
            <asp:Parameter Name="name" />
            <asp:Parameter Name="date1" />
            <asp:Parameter Name="date2" />
        </SelectParameters>
    </asp:SqlDataSource>

    <div id="page-wrapper">
        <div id="page-inner">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="page-header">借阅图书排行  <small>查询被借阅次数最多的图书图书类型</small>
                    </h1>
                </div>
            </div>
            <div class="row">

                <div class="col-md-12">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <p style="font-size: 25px;">被借阅次数最多的图书图书类型查询</p>
                        </div>

                        <div class="container" style="width: 970px">

                            <fieldset>
                                <legend></legend>
                                <div class="control-group" style="float: left; margin-left: 10px; margin-right: auto;">

                                    <div class="controls  input-append date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">

                                        <label class="control-label">起始时间</label>
                                        <input runat="Server" id="date1" class="form-control" style="width: 200px;" size="16" type="text" value="" readonly>
                                        <span class="add-on"><i class="icon-remove"></i></span>
                                        <span class="add-on"><i class="icon-th"></i></span>
                                    </div>
                                    <input type="hidden" id="dtp_input2" value="" /><br />
                                </div>

                                <div class="control-group" style="float: left; margin-left: 50px; margin-right: auto;">

                                    <div class="controls  input-append date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                                        <label class="control-label">截至时间</label>
                                        <input runat="Server" id="date2" class="form-control" style="width: 200px;" size="16" type="text" value="" readonly>

                                        <span class="add-on"><i class="icon-remove"></i></span>
                                        <span class="add-on"><i class="icon-th"></i></span>
                                    </div>
                                    <input type="hidden" id="Hidden1" value="" /><br />

                                </div>


                                <asp:TextBox ID="TextBox1" CssClass="form-control" runat="server" Style="width: 123px; margin-left: 470px; margin-top: 25px; position: absolute;" placeholder="选择前?本..." />
                                <asp:Button ID="Button3" CssClass="btn btn-primary" runat="server" Text="查询排行" Style="margin-top: -98px; margin-left: 597px;" OnClick="Cancel_Click" />
                                <asp:Button ID="Button1" CssClass="btn  btn-success" runat="server" Text="导出报表" Style="margin-top: -98px;" OnClick="baobiao_Click" />

                            </fieldset>
                        </div>

                    </div>
                    <!--End Advanced Tables -->
                </div>

            </div>
            <!-- /. ROW  -->


                  <div class="col-md-6 col-sm-6" style="width: 103%;margin-left: -15px;margin-top: -21px;">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    图表视图
                                </div>
                                <div class="panel-body">
                                    <ul class="nav nav-tabs">
                                        <li id="li1" class=""><a href="#home" data-toggle="tab" aria-expanded="false">排行表格视图</a>
                                        </li>
                                        <li  class="active"><a id="li2" href="#profile" data-toggle="tab" aria-expanded="true">借阅排行柱状图</a>
                                        </li>
                                        <li id="li3" class=""><a href="#messages" data-toggle="tab" aria-expanded="false">借阅分类饼状图</a>
                                        </li>
                                        <li id="li4" class=""><a href="#settings" data-toggle="tab" aria-expanded="false">日借阅量条形图</a>
                                        </li>
                                    </ul>

                                    <div class="tab-content">
                                        <div class="tab-pane fade " id="home">
                                            <h4>排行表格视图</h4>

                                            <div class="panel-body">
                                                <div class="table-responsive">
                                                    <!-- 数据源开始 -->
                                                    <asp:GridView ID="mybookdata" class="mytablestyle table table-striped table-bordered table-hover" runat="server" DataSourceID="SqlDataSource1">

                                                        <Columns>
                                                            <asp:TemplateField HeaderText="选择">
                                                                <ItemStyle HorizontalAlign="Center" />
                                                                <ItemTemplate>
                                                                    <asp:CheckBox ID="CheckBox" CssClass="checkbox" runat="server"></asp:CheckBox>
                                                                </ItemTemplate>
                                                            </asp:TemplateField>
                                                        </Columns>
                                                    </asp:GridView>
                                                    <!-- 数据源结束 -->
                                                    <br />
                                     <script> window.onload = function asdasd() {
                                     $("#ContentPlaceHolder1_mybookdata tr:first").wrap("<thead></thead>");
                                     $("#ContentPlaceHolder1_mybookdata thead").insertBefore("#GriView1 tbody");
                                     $("#ContentPlaceHolder1_mybookdata").dataTable();
                                 }</script>
                                        </div>

                                            </div>
                                        </div>
                                        <div class="tab-pane fade active in"  id="profile">
                                            <h4>借阅排行柱状图</h4>
                                            <canvas id="myChart" width="1000" height="400"></canvas>
                                           		<script>

                                           		    var data = {
                                           		        labels: [<%=bardataname%>],
                                           		        datasets: [
                                                           
                                                            {
                                                                barItemName: "name2",
                                                                fillColor: "rgba(151,187,205,0.5)",
                                                                strokeColor: "rgba(151,187,205,1)",
                                                                data: [<%=bardata%>]
                                                            }
                                           		        ]
                                           		    };
                                           		    var data2 = [
				                                        
                                                        <% =bingdata%>
                                           		    ];




                                           		    var chartBar = null;
                                           		    var chartPie = null;
                                           		    window.onload= function () {
                                           		        var ctx = document.getElementById("myChart").getContext("2d");
                                           		        chartBar = new Chart(ctx).Bar(data);

                                           		        initEvent(chartBar, clickCall);

                                           		        var ctx2 = document.getElementById("myChart2").getContext("2d");
                                           		        chartPie = new Chart(ctx2).Pie(data2, { segmentShowStroke: false, showTooltips: 1 });

                                           		        initEvent(chartPie, clickCall);
                                           		    }

                                           		    function clickCall(evt) {
                                           		        var activeBar = chartBar.getBarSingleAtEvent(evt);
                                           		        if (activeBar !== null) {
                                           		            alert(activeBar.label + ": " + activeBar.barItemName + " ____ " + activeBar.value);
                                           		        }

                                           		        var segments = chartPie.getSegmentsAtEvent(evt2);

                                           		        if (segments.length > 0) {
                                           		            var segment = segments[0];
                                           		            alert(segment.label + ": " + segment.value);
                                           		        }
                                           		    }



                                           		    function initEvent(chart, handler) {
                                           		        var method = handler;
                                           		        var eventType = "click";
                                           		        var node = chart.chart.canvas;

                                           		        if (node.addEventListener) {
                                           		            node.addEventListener(eventType, method);
                                           		        } else if (node.attachEvent) {
                                           		            node.attachEvent("on" + eventType, method);
                                           		        } else {
                                           		            node["on" + eventType] = method;
                                           		        }
                                           		    }

                                                   </script>
                                        </div>
                                        <div class="tab-pane fade"  id="messages">
                                            <h4>借阅分类饼状图</h4>
                                           <canvas id="myChart2" width="400" height="400"></canvas>
                                        </div>
                                        <div class="tab-pane fade"  id="settings">
                                            <h4>日借阅量条形图</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>





        </div>

        <!-- /. PAGE INNER  -->
    </div>
    <script>
        function loadtable() {
            $("#ContentPlaceHolder1_mybookdata tr:first").wrap("<thead></thead>");
            $("#ContentPlaceHolder1_mybookdata thead").insertBefore("#GriView1 tbody");
            $("#ContentPlaceHolder1_mybookdata").dataTable();
        };
    </script>


    <!-- Bootstrap Js必要 -->
    <script src="assets/js/jquery-1.10.2.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>



    <script src="assets/js/bootstrap-datetimepicker.min.js"></script>
    <script src="assets/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <!-- Metis Menu Js -->
    <script src="assets/js/jquery.metisMenu.js"></script>
    <!-- DATA TABLE SCRIPTS -->
    <script src="assets/js/ReportTables.js"></script>
    <script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
    <!-- Custom Js -->
    <script src="assets/js/custom-scripts.js"></script>
    <!-- 日期管理 -->
    <script type="text/javascript">
        $('.form_date').datetimepicker({
            language: 'zh-CN',
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0,
            format: 'yyyy-mm-dd'
        });
    </script>
</asp:Content>

